<template>
  <div>
    <el-tooltip effect="dark" content="请点击上传" placement="top-start">
      <div style="width: 300px">
        <el-button style="margin:10px 0 " type="primary" :loading="loading_left" @click="addRemoteFile">
          {{ loading_left ? '正在等待设备回传结果...' : '采集特征(左手)' }}
        </el-button>
      </div>
    </el-tooltip>
    <div class="image-wrap">
      <div class="image-wrap">
        <el-table :data="leftImageList" border fit highlight-current-row>
          <el-table-column align="center" label="掌静脉图片(点击查看)" width="300">
            <template slot-scope="scope">
              <el-button type="text" @click="handlePictureCardPreview(scope.row)">{{ scope.row.filename }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" class-name="status-col" label="状态" prop="sTime">
            <template slot-scope="scope">{{ loadCompletedObj[scope.row.loadCompleted] }}</template>
          </el-table-column>
          <el-table-column align="center" class-name="status-col" label="操作" width="120">
            <template slot-scope="{ row, $index }">
              <el-button slot="reference" size="mini" class="light_red_btn" @click="handleRemove(row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true">
          <div class="jp2-img2">
            <img :src="detailsItem" data-display-polyfill-info="true" />
          </div>
        </el-dialog>
      </div>

    </div>
  </div>
</template>

<script>
import { delPersonFaceApi, getEventIdentity, handleRemoteAdd, queryPersonIdByName } from "@/api/community/person";

export default {
  name: "leftHand",
  props: {
    personName: {
      type: String,
      default: () => ""
    }
  },
  data: function () {
    return {
      // canStop:[],
      intervalData: null,
      personIdData: "",
      leftImageList: [],
      loading_left: false,
      loadCompletedObj: {
        '-1': `已发送到设备，设备回复:失败`,
        '0': '已发送到设备，设备回复:等待',
        '1': '已发送到设备，设备回复:成功',
        '2': '已发送到设备，设备回复:正在删除'
      },
      dialogVisible: false,
      dialogImageUrl: "",
      detailsItem: {},
    }
  },
  methods: {


    handleRemove(file) {
      console.log(file.identityID);
      let params = {
        // idList: [file.palmarVeinId],
        identityID: file.identityID,
      };
      delPersonFaceApi(params).then((res) => {
        if (res) {
          this.$message.success("删除成功");
          this.getLeft();
        }
      });
    },

    addRemoteFile() {
      let params = {
        name: this.$props.personName,
        effectiveStartTime: JSON.parse(window.localStorage.getItem("time-array")).effectiveStartTime,
        validEndTime: JSON.parse(window.localStorage.getItem("time-array")).validEndTime,
        type: 0,
      }
      // params = JSON.parse(window.localStorage.getItem("time-array"))
      // console.log('params1', params)
      //左手
      this.loading_left = true
      handleRemoteAdd(params).then(r => {
        console.log(r);
        this.loading_left = false
        this.$message.success("左手操作成功，等待设备回传结果");
        this.setIntervalMethod()
      }).catch(e => {
        console.log(e);
        this.loading_left = false
        this.$message.error("操作失败，请重试");
      })
      console.log('左手')

    },

    // 打开弹框
    handlePictureCardPreview(uploadFile) {
      console.log('uploadFile', uploadFile.url)
      this.dialogImageUrl = uploadFile.url;
      this.dialogVisible = true;
      // jp2
      this.$forceUpdate();
      this.detailsItem = process.env.VUE_APP_BASE_URL + uploadFile.url;
      console.log("this.detailsItem-plainvein", this.detailsItem);
      this.$nextTick(() => {
        this.asyncJp2();
      });
    },

    asyncJp2() {
      const s = document.createElement("script");
      s.type = "text/JavaScript";
      s.setAttribute("data-callType", "callScript");
      s.src = `${process.env.VUE_APP_BASE_URL}/html/jp2-polyfill.js`;
      // s.src = `http://192.168.30.65:92/html/jp2-polyfill.js`;
      // s.src = "/src/utils/html/jp2-polyfill.js";
      // console.log('s.src',s.src);
      document.head.appendChild(s);
    },

    setIntervalMethod() {
      let params = { name: this.personName }
      const interval = setInterval(() => {
        queryPersonIdByName(params).then(res => {
          // console.log("daf", res)
          if (res.length) {
            this.personIdData = res
            clearInterval(interval)
            //拿到 person-id 查表格
            this.setIntervalApi()
          }
        }).catch(e => {
          console.log(e);
        })
      }, 2000)
    },


    setIntervalApi() {
      this.intervalData = setInterval(() => {
        this.getLeft()
      }, 2000);
    },

    getLeft() {
      this.leftImageList = [];
      let query_l = {
        personId: this.personIdData[0].personId,
        type: "plamVeinLeft",
      };
      getEventIdentity(query_l).then((res) => {
        let list = res;

        list.forEach((item) => {
          item.url = item.identityData;
          item.name = item.filename;
        });
        list.map((item) => {
          this.leftImageList.push(item);

        });
        this.leftImageList.map((v, i) => {
          console.log('v', v)
          if (v.loadCompleted != 0) {
            clearInterval(this.intervalData)
          }
        })
        // if (this.leftImageList.length !== 0) {
        //   clearInterval(this.intervalData)
        // }
      });
    },



  }
}
</script>

<style scoped></style>
